import React, { Component } from 'react'
import echarts from 'echarts'
import { ConfigProvider, DatePicker } from 'antd'
import "./style.scss"
import locale from 'antd/lib/locale/zh_CN'

const { RangePicker } = DatePicker
interface IProps {

}
interface IStates {
    active: number,
    value: any
}

export default class CustomerTotal extends Component<IProps, IStates> {
    private myChart: any
    private option: any = {
        color: ["#406cec", "#fd7417", "#8c51cc"],
        tooltip: {
            formatter: '{a}:{c}({d}%)'
        },
        // x轴数据配置
        legend: {
            orient: 'vertical',
            right: 0,
            top: 50,
            data: ['生产', '销售', '召回']
        },
        xAxis: {
            show: false,
        },
        // y轴数据配置
        yAxis: {
            show: false,
        },
        // 数据区域配置
        series: [
            {
                name: '总数',
                type: 'pie',
                radius: [40, 55],
                bottom: 20,
                roseType: true,
                label: {
                    formatter: '{d}%'
                }
            }
        ]
    }
    constructor(props: IProps) {
        super(props)
        this.state = {
            active: 1,
            value: ""
        }
    }
    public componentDidMount() {
        const d = document.getElementById("myChartPie") as HTMLCanvasElement
        this.myChart = echarts.init(d)
        this.search(1)
        // 监听窗口尺寸变化，动态渲染表格大小
        window.addEventListener("resize", () => {
            this.myChart.resize()
        })
    }
    public componentWillUnmount() {
        window.removeEventListener("resize", () => { this.myChart.resize() })
    }
    // 用于网络请求数据
    public search = (num: number) => {
        if (num === 1) {
            this.option.series[0].data = [
                { name: "生产", value: "3500" },
                { name: "销售", value: "4500" },
                { name: "召回", value: "6800" }
            ]
        } else if (num === 2) {
            this.option.series[0].data = [
                { name: "生产", value: "100" },
                { name: "销售", value: "9500" },
                { name: "召回", value: "3200" }
            ]
        }
        this.myChart.setOption(this.option)
    }
    public dateClick = (num: number) => {
        this.setState({ active: num }, () => {
            this.state.active === 1 ? this.search(1) : this.search(2)
        })
        this.setState({ value: "" })
        // console.log(this.datePickerRef)
    }
    public rangeChange = (date: any, dateStrings: string[]) => {
        this.setState({ active: 3, value: date })
    }
    public render() {
        const { active, value } = this.state
        return (
            <div className="customer-total">
                <div className="pie-chart-title">食品统计</div>
                <div className="crm-home-check">
                    <div>
                        <div className={active === 1 ? "active-s" : "crm-home-date-s"} onClick={() => { this.dateClick(1) }}>近7天</div>
                        <div className={active === 2 ? "active-t" : "crm-home-date-t"} onClick={() => { this.dateClick(2) }}>近30天</div>
                        <div className="date-pick">
                            <ConfigProvider locale={locale}>
                                <RangePicker
                                    size="small"
                                    onChange={this.rangeChange}
                                    style={{ width: "200px" }}
                                    value={value}></RangePicker>
                            </ConfigProvider>
                        </div>
                    </div>
                </div>
                <div id="myChartPie" className="pie-chart"></div>
            </div>
        )
    }
}